<%@page language="java" contentType="text/html; charset=utf-8"%>
<%@include file="/tagDeclare.jsp"%>
<%@include file="/headDeclare.jsp"%>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=rhPVE2HvyR3DbvYWe7DOWGS4"></script>
	<script type="text/javascript" src="<%=basePath%>js/bmap/DistanceTool_min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/bmap/RectangleZoom_min.js"></script>
<title>map</title>
</head>
<body>
<%-- 	<input type="hidden" name="role" id="role" value="${username_attr.role }"/> --%>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">

	var map = null;
	var wallArr = new Array();

	// 百度地图API功能
	map = new BMap.Map("allmap"); // 创建Map实例
	map.centerAndZoom(new BMap.Point(119.28, 25.88), 9); // 初始化地图,设置中心点坐标和地图级别
	map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
	map.setCurrentCity("福州"); // 设置地图显示的城市 此项是必须设置的

	map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

	var top_left_control = new BMap.ScaleControl({ anchor : BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件

	//添加控件和比例尺
	map.addControl(top_left_control);
	map.addControl(top_left_navigation);

	var role = 1;
	
	<c:forEach items="${list}" var="wall">
				// 		  0    |     1       |     2        |   3           |     4               5            6          7               8            9
		wallArr.push('${wall.id}|${wall.city}|${wall.county}|${wall.address}|${wall.username}|${wall.tel}|${wall.high}|${wall.width}|${wall.area}|${wall.images}');
	</c:forEach>

	// 创建地址解析器实例
	var myGeo = new BMap.Geocoder();
	var str = "";
	var marker = null;
	for (var i = 0; i < wallArr.length; i++) {
		// 将地址解析结果显示在地图上,并调整地图视野
		var wall = wallArr[i];
		var wArr = wall.split("|");
		geocodeSearch(i, wArr);
	}
	var title = '';
	function geocodeSearch(index, wArr) {
		myGeo.getPoint(wArr[1]+wArr[2]+wArr[3], function(point) {
			if (point) {
				title =  wArr[1]+wArr[2]+wArr[3];
				addMarker(wArr, point, new BMap.Label(title,
						{
							offset : new BMap.Size(20, -10)
						}));
			}
		}, "福州市");
	}
	// 编写自定义函数,创建标注
	function addMarker(wArr, point, label) {
		marker = new BMap.Marker(point);
		marker.enableDragging();
		
		marker.addEventListener("click", function() {
			//var p = this.getPosition();  经纬度：" + p.lng + "," + p.lat
			var images = wArr[9].split(",");
			var imageContent = "";
			var telContent = "";
			if(role==1) telContent = " 联系方式："+wArr[5];
			for(var i = 0; i < images.length; i++){
				var name = images[i].substring(images[i].lastIndexOf("/")+1);
				if(name!="")
				imageContent += 
				"<img style='margin:4px' id='imgDemo' src='"+images[i]+"' width='100' height='100' title='"+wArr[1]+wArr[2]+wArr[3]+name+"'/>";
			}
			var sContent =  "<div width = '300'><h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+wArr[1]+wArr[2]+wArr[3]+"</h4>" + 
			"<p style='margin:0;line-height:1.5;font-size:13px;'>地址："+wArr[1]+wArr[2]+wArr[3] +"</p>"+
			"<p style='margin:0;line-height:1.5;font-size:13px;'>规格：宽"+wArr[7]+"(m)*高"+wArr[6]+"(m)=面积"+wArr[8]+"(m<sup>2</sup>)</p>"+
			"<p style='margin:0;line-height:1.5;font-size:13px;'>姓名："+wArr[4]+telContent+"</p>"+imageContent+
			"</div>";
			//alert(sContent);
			var infoWindow = new BMap.InfoWindow(sContent);
			this.openInfoWindow(infoWindow);
			   //图片加载完毕重绘infowindow
			   document.getElementById('imgDemo').onload = function (){
				   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
			   }
		});
		map.addOverlay(marker);
		marker.setLabel(label);

	}

	
</script>
